<template>
  <div id="md-shared-header-component">
    <div class="header-logo">{{logoText}}</div>
    <div class="header-right">
      <div class="header-navs-left">
        <i class="md-icon-hang" @click="handleCollapse()"></i>
      </div>

      <div class="header-navs-right">
        <ul>
          <li class="header-navs-icon" v-for="item in headerMenus.filter(e=>e.type===1)" :key="item.value" @click="handleMenuClick(item);">
            <el-tooltip class="item" effect="dark" :content="item.label" placement="bottom">
              <i :class="item.icon" :title="item.label"></i>
            </el-tooltip>
          </li>

          <li class="header-navs-dropdown">
            <el-dropdown type="primary" trigger="click" @command="handleCommand">
              <span>
                <el-avatar :size="30" :src="user.avatar"></el-avatar>
                {{user.nickName}}
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="item in headerMenus.filter(e=>e.type===2)" :key="item.value" :command="item.value" :icon="item.icon">{{item.label}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import screenfull from 'screenfull/dist/screenfull'
export default {
  name: 'MdSharedHeaderComponent',
  props: ['user'],
  data () {
    return {
      fullscreen: false // 是否全屏
    }
  },
  computed: {
    isCollapse () {
      return this.$store.state.mdShared.isCollapse
    },
    logoText () {
      return this.$store.state.mdShared.logoText
    },
    headerMenus () {
      return this.$store.state.mdShared.headerMenus
    }
  },
  methods: {
    handleCollapse () {
      this.$store.state.mdShared.isCollapse = !this.isCollapse
    },
    /** 头部菜单点击事件 */
    handleMenuClick (item) {
      switch (item.value) {
        // 手机端预览
        case 1: break
        // 全屏
        case 2:
          this.handleFullScreen()
          break
        // 客户端下载
        case 3: break
        // 帮助文档
        case 4: break
      }
    },
    /** 全屏 */
    handleFullScreen () {
      if (!screenfull.isEnabled) {
        this.$message.warning('您的浏览器不支持全屏')
        return
      }

      screenfull.toggle()

      this.fullscreen = !screenfull.isFullscreen
    },
    /** 头部头像下拉菜单事件 */
    handleCommand (command) {
      const menu = this.headerMenus.find(e => e.value === command)
      switch (command) {
        // 个人中心
        case 5:
          if (menu && menu.path) {
            this.$router.push(menu.path)
          }
          break
        // 修改密码
        case 6:
          if (menu && menu.path) {
            this.$router.push(menu.path)
          }
          break
        // 主题设置
        case 7:
          if (menu && menu.path) {
            this.$router.push(menu.path)
          }
          break
        // 退出登录
        case 8:
          this.handleOutLogin()
          break
      }
    },
    /** 退出登录 */
    async handleOutLogin () {
      try {
        await this.$confirm('确认要退出登录吗？')

        this.$local.clear()

        window.location.href = '/login'
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="less" scoped>
#md-shared-header-component {
  width: 100%;
  height: @md-shared-header-height;
  line-height: @md-shared-header-height;
  background-color: @md-shared-header-bg;
  box-sizing: border-box;
  display: flex;
  align-items: center;

  .header-logo {
    width: @md-shared-sidebar-width; // logo宽度同等左侧菜单宽度
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    color: @md-shared-header-color;
  }

  .header-right {
    flex: 1;
    display: flex;
    align-items: center;

    .header-navs-left {
      .md-icon-hang {
        .md-icon-hang(#fff, 2px, 20px, 15px);
      }
    }

    .header-navs-right {
      flex: 1;
      box-sizing: border-box;
      padding-right: 15px;

      ul {
        padding: 0px;
        margin: 0px;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        li {
          cursor: pointer;
          &.header-navs-icon {
            padding: 0px 10px;
            i {
              font-size: 20px;
              color: #fff;
            }
          }
          &:last-child {
            padding-left: 20px;
          }
          &.header-navs-dropdown {
            .el-dropdown {
              .el-dropdown-selfdefine {
                padding-top: 8px;
                display: flex;
                align-items: center;
                cursor: pointer;
                color: @md-shared-header-color;
                font-size: 15px;
                .el-avatar {
                  margin-right: 10px;
                }
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  #md-shared-header-component {
    display: none;
  }
}
</style>